<template>
  <div class="d-view video-list" v-loading="loading">
    <div class="header">
      <div class="title">
        <span>{{ liveInfo.screenName }}</span>
        <title-decorate class="title-decorate" :row="4" :col="20" :diffRow="2" :diffCol="13"></title-decorate>
      </div>
      <div class="action">
        <template v-for="btn in btnList">
          <el-popover
              :key="btn.id"
              placement="bottom"
              v-if="btn.id==='user'"
              popper-class="close-popover"
              trigger="click">
            <div class="btn" @click="logout">
              退出账户
            </div>
            <div slot="reference" class="btn " style="margin-left:1.25rem" :key="btn.id" @click="handelActionClick(btn.id)">
              <img :src="btn.icon">
            </div>
          </el-popover>
          <div class="btn" :key="btn.id" style="margin-left:1.25rem" v-else-if="btn.isShow" @click="handelActionClick(btn.id)">
            <img :src="btn.icon">
          </div>
        </template>
      </div>
    </div>
    <div class="main">
      <div class="content">
        <div class="video-area">
          <div class="video-content" id="video-box"></div>
        </div>
        <div class="video-main-title">{{ videoTitle }}</div>
        <el-scrollbar>
          <template v-if="!isEdit">
            <div class="video-list">
              <div class="video-item" v-for="(video,index) in bottomVideoList" :key="index+'bottom'"
                   @click="playVideo(video.VideoURL)">
                <img :src="video.imgURL">
                <div class="video-title">{{ video.name }}</div>
              </div>
            </div>
          </template>
        </el-scrollbar>
        <template v-if="isEdit">
          <div class="edit-title">
            <span>视频页面设置</span>
            <span class="desc">最多上传5个视频，每个视频的大小不超过300M。建议视频内容为施工阶段视频如：水电改造延时视频，地砖铺贴延时视频。视频上传后，播放区会自动播放视频</span>
          </div>
          <el-scrollbar>
            <div class="edit-video-list">
              <div class="edit-item" v-for="(video,index) in bottomVideoList" :key="index+'bottom_edit'"
                   v-dragging="{item:index,list:bottomVideoList,group:'edit-item'}">
                <img :src="video.imgURL">
                <div class="edit-item-title">{{ video.name }}</div>
                <div class="edit-item-action">
                  <el-button type="primary" icon="el-icon-edit" circle @click="editVideo(video)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle @click="delVideo(video)"></el-button>
                </div>
              </div>
              <div class="edit-video-upload" @click="addVideo" v-if="bottomVideoList.length<5">
                <i class="iconfont icon-add-select"></i>
              </div>
            </div>
          </el-scrollbar>
        </template>
      </div>
      <div class="nav-video-list">
        <div class="search-box" v-if="!isEdit">
          <el-input placeholder="请输入内容" v-model="search.name"
                    clearable
                    suffix-icon="iconfont icon-search" size="small">
          </el-input>
          <el-select v-model="search.type" placeholder="请选择" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option label="有视频" value="0"></el-option>
            <el-option label="无视频" value="1"></el-option>
          </el-select>
        </div>
        <div class="title" v-else>直播页面设置</div>
        <div class="video-list" :model="liveInfo.windowType">
          <template v-if="!isEdit">
            <el-scrollbar style="height: 100%;overflow-x: hidden">
              <div class="scroll-panel">
                <div class="video-item" v-for="(item,index) in showVideoList" :key="index+'right-video'"
                     :video="!!item.VideoURL" @click="playVideo(item.VideoURL,true,item.name)">
                  <el-image :src="item.imgURL" :style="{'width':rightVideoWidth,'height':rightVideoHeight}">
                  </el-image>
                  <div class="video-title">
                    <div class="video-desc" :video="!!item.VideoURL">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </template>
          <div class="edit-content" v-else>
            <el-form label-width="120px" size="small">
              <el-form-item label="页面标题">
                <el-input v-model="editLiveIngo.screenName" clearable></el-input>
              </el-form-item>
              <el-form-item label="轮播时间（秒）">
                <el-input-number :min="1" v-model="editLiveIngo.carousel " label="描述文字"></el-input-number>
              </el-form-item>
              <div class="desc">默认轮播时间5分钟，控制直播页面翻页速度</div>
              <el-form-item label="窗口布局">
                <el-radio v-model="editLiveIngo.windowType" label="1">3*6</el-radio>
                <el-radio v-model="editLiveIngo.windowType" label="2">2*5</el-radio>
              </el-form-item>
              <el-form-item label="无合成视频工地">
                <el-switch v-model="editLiveIngo.offline">
                </el-switch>
              </el-form-item>
              <div class="desc">当安装设备的工地不多时，打开开关显示离线工地</div>
              <el-form-item label="设置样板工地">
                <el-switch v-model="editLiveIngo.model">
                </el-switch>
              </el-form-item>
              <div class="desc">打开开关，直播页面仅展示样板工地</div>
              <el-form-item label="">
                <el-button type="primary" size="small" @click="setTopVideo">设置样板工地</el-button>
              </el-form-item>
              <el-form-item label="数据类型">
                <el-radio v-model="editLiveIngo.datatype " label="1">系统数据</el-radio>
                <el-radio v-model="editLiveIngo.datatype " label="0">固定数据</el-radio>
              </el-form-item>
            </el-form>
            <div class="img-content" v-if="editLiveIngo.datatype ==='0'">
              <el-scrollbar>
                <div class="edit-video-list">
                  <div class="edit-item" v-for="(imgInfo,index) in rightImgList" :key="index+'right-img'">
                    <img :src="imgInfo.imgURL">
                    <div class="edit-item-title">{{ imgInfo.name }}</div>
                    <div class="edit-item-action">
                      <el-button type="primary" icon="el-icon-edit" @click="editImg(imgInfo)" circle></el-button>
                      <el-button type="danger" icon="el-icon-delete" @click="delImg(imgInfo)" circle></el-button>
                    </div>
                  </div>
                  <div class="edit-video-upload" @click="addImg">
                    <i class="iconfont icon-add-select"></i>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
        <div class="video-footer">
          <el-pagination
              :current-page.sync="pageIndex"
              background
              layout="prev, pager, next"
              :page-size="pageCount"
              :total="searchVideoList.length" v-if="!isEdit">
          </el-pagination>
        </div>
        <div class="action" v-if="isEdit">
          <el-button round size="small" @click="isEdit=false">取消</el-button>
          <el-button type="primary" size="small" round @click="handleSettingSave">保存</el-button>
        </div>
      </div>
    </div>
    <UploadVideoDialog ref="uploadVideoDialogRef" @save="handleBottomAdd"></UploadVideoDialog>
    <UploadImgDialog ref="uploadImgDialogRef" @save="handleRightAdd"></UploadImgDialog>
    <ChooseTopVideoDialog ref="topSaveDialogRef" @save="handleTopSave"></ChooseTopVideoDialog>
  </div>
</template>

<script>
import TitleDecorate from "@/components/TitleDecorate";
import icon1 from '@/assets/image/videoList/icon1.png'
import icon2 from '@/assets/image/videoList/icon2.png'
import icon3 from '@/assets/image/videoList/icon3.png'
import icon4 from '@/assets/image/videoList/icon4.png'
import icon5 from '@/assets/image/videoList/icon5.png'
import icon6 from '@/assets/image/videoList/icon6.png'
import icon7 from '@/assets/image/videoList/icon7.png'
import fullScreen from '@/assets/image/videoList/fullscreen.png'
import smallScreen from '@/assets/image/videoList/smallscreen.png'
import {videoRequest} from "@/utils/http/request";
import UploadVideoDialog from "@/views/videoList/components/UploadVideoDialog";
import UploadImgDialog from "@/views/videoList/components/UploadImgDialog";
import ChooseTopVideoDialog from "@/views/videoList/components/ChooseTopVideoDialog";
import {closeWindow, minWindow} from "@/utils/brower";

export default {
  name: "App",
  components: {
    'title-decorate': TitleDecorate,
    UploadVideoDialog,
    UploadImgDialog,
    ChooseTopVideoDialog
  },
  watch: {
    isEdit(val) {
      if (val) {
        this.editLiveIngo = {...this.liveInfo}
        this.editLiveIngo.model = this.editLiveIngo.model === 'True'
        this.editLiveIngo.offline = this.editLiveIngo.offline === 'True'
      }
    },
    rightVideoList(val) {
      if (val) {
        this.rightImgList = val.filter(item => item.is_true === '0').map(item => {
          return {
            name: item.name,
            is_delete: '0',
            imgURL: item.imgURL
          }
        })
      }
    },
  },
  mounted() {
    window.onresize = () => {
      let isFull = !!(document.webkitIsFullScreen || document.mozFullScreen ||
          document.msFullscreenElement || document.fullscreenElement
      );
      if (isFull) {
        this.btnList[2].isShow = false;
        this.btnList[3].isShow = true;
      } else {
        this.btnList[2].isShow = true;
        this.btnList[3].isShow = false;
      }
    }
    this.initVideo();
    this.init()
    this.$nextTick(() => {
      const dom = document.querySelector('.nav-video-list .video-list')
      this.rightWidth = dom.offsetWidth
    })
  },
  data() {
    return {
      title: '东易日盛工地直播',
      // 按钮列表
      btnList: [
        {
          id: 'switch-page',
          title: '切换页面',
          icon: icon1,
          isShow: true,
        },
        {
          id: 'min-screen',
          title: '最小化',
          icon: icon2,
          isShow: true,
        },
        {
          id: 'full-screen',
          title: '全屏',
          icon: icon3,
          isShow: true,
        },
        {
          id: 'recovery-screen',
          title: '还原屏幕',
          icon: icon7,
          isShow: false,
        },
        {
          id: 'set',
          title: '设置',
          icon: icon4,
          isShow: true,
        },
        {
          id: 'user',
          title: '用户',
          icon: icon5,
          isShow: true,
        },
        {
          id: 'close',
          title: '退出',
          icon: icon6,
          isShow: true,
        },

      ],
      // 视频标题
      videoTitle: '',
      loading: false,
      search: {
        type: '',
        name: ''
      },
      // 播放器
      aliPlayer: null,
      // 是否编辑
      isEdit: false,
      isVideoFull: false,
      videoInfo: {
        screenName: '',
        windowType: '',
        model: false
      },
      liveInfo: {
        screenName: '',
        windowType: '',
        datatype: 'true',
        // 轮播时间
        carousel: 5 * 60,
        // 无合成视频工地
        offline: false,
        model: false
      },
      editLiveIngo: {},
      bottomVideoList: [],
      rightImgList: [],
      rightVideoWidth: '30%',
      rightVideoHeight: '20%',
      rightWidth: 0,
      rightVideoList: [],
      pageIndex: 1,
      playVideoIndex: 0
    }
  },
  computed: {
    searchVideoList() {
      return this.rightVideoList.filter(item => {
        return item.name.indexOf(this.search.name) > -1
      }).filter(item => {
        if (this.search.type === '') {
          return item
        } else if (this.search.type === '0') {
          return item.VideoURL
        } else {
          return !item.VideoURL
        }
      })
    },
    showVideoList() {
      return this.searchVideoList.slice((this.pageIndex - 1) * this.pageCount, this.pageIndex * this.pageCount)
    },
    pageCount() {
      if (!this.liveInfo) {
        return 18
      }
      return this.liveInfo.windowType === '1' ? 18 : 10
    },
  },
  methods: {
    logout() {
      sessionStorage.clear()
      this.$router.push('/login')
    },
    setTopVideo() {
      this.$refs['topSaveDialogRef'].openDialog(this.rightVideoList)
    },
    handelActionClick(btnId) {
      switch (btnId) {
        case 'full-screen':
          this.fullScreen();
          this.btnList[2].isShow = false;
          this.btnList[3].isShow = true;
          break;
        case 'recovery-screen':
          this.exitFullscreen();
          this.btnList[2].isShow = true;
          this.btnList[3].isShow = false;
          break;
        case 'set':
          this.isEdit = !this.isEdit;
          break;
        case 'switch-page':
          this.choosePath()
          break;
        case 'min-screen':
          minWindow()
          break;
        case 'close':
          closeWindow()
          break;
      }
    },
    //全屏
    fullScreen(dom) {
      let element = dom || document.querySelector("#app");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    // 初始化视频
    initVideo() {
      let source = ''
      if (this.bottomVideoList && this.bottomVideoList.length > 0) {
        source = this.bottomVideoList[0]
      }
      this.aliPlayer = new window.Aliplayer({
        id: 'video-box',
        height: '100%',
        autoplay: true,
        source: source
      });
      setTimeout(() => {
        // let fullscreenBtn = document.querySelector('.prism-fullscreen-btn');
        let prismControlBar = document.querySelector('.prism-controlbar');
        // fullscreenBtn.remove();
        let fullBtn = document.createElement('div');
        fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
        fullBtn.className = 'full-btn'
        prismControlBar.insertBefore(fullBtn, prismControlBar.children[4])

        fullBtn.addEventListener('click', () => {
          this.isVideoFull = !this.isVideoFull;
          if (!this.isVideoFull) {
            this.exitFullscreen();
            fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
          } else {
            this.fullScreen(document.querySelector('#video-box'))
            fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${smallScreen}) no-repeat;
          background-size: contain;
        `
          }
        })

        // 取消全屏
        this.aliPlayer.on('cancelFullScreen', () => {
          this.isVideoFull = false;
          fullBtn.style = `
          float: right; margin-right: 10px; margin-top: 12px;width: 24px; height: 24px;
          background: url(${fullScreen}) no-repeat;
          background-size: contain;
        `
        });

        this.aliPlayer.on("ended", () => {
          if (this.bottomVideoList && this.bottomVideoList.length > 0) {
            if (++this.playVideoIndex > this.bottomVideoList.length - 1) {
              this.playVideoIndex = 0
            }
            this.videoTitle = this.bottomVideoList[this.playVideoIndex].name
            this.playVideo(this.bottomVideoList[this.playVideoIndex].VideoURL)
          }


        });
      }, 1000)
    },
    playVideo(newUrl, isRight, videoTitle) {
      if (newUrl) {
        this.aliPlayer.loadByUrl(newUrl);
        if (videoTitle) {
          this.videoTitle = videoTitle
        }
        if (isRight) {
          setTimeout(() => {
            if (this.bottomVideoList && this.bottomVideoList.length > 0) {
              this.playVideo(this.bottomVideoList[this.playVideoIndex].VideoURL)
              this.videoTitle = this.bottomVideoList[this.playVideoIndex].name
            }
          }, (this.liveInfo.carousel || 5 * 60) * 1000)
        }
      }

    },
    addVideo() {
      this.$refs.uploadVideoDialogRef.openDialog()
    },
    addImg() {
      this.$refs.uploadImgDialogRef.openDialog()
    },
    editVideo(videoInfo) {
      this.$refs.uploadVideoDialogRef.openDialog({...videoInfo})
    },
    editImg(imgImfo) {
      this.$refs.uploadImgDialogRef.openDialog({...imgImfo})
    },
    delVideo(videoInfo) {
      this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.bottomVideoList.findIndex(item => item === videoInfo)
        this.bottomVideoList.splice(index, 1)
        videoRequest.setVideoWebUpload({
          datalist: this.bottomVideoList
        }).then(res => {
          const {code, msg} = res
          if (code === '01') {
            this.$message.success(msg)
            this.init()
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delImg(imgInfo) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.rightImgList.findIndex(item => item === imgInfo)
        this.rightImgList.splice(index, 1)
        videoRequest.setImageUpload({
          datalist: this.rightImgList
        }).then(res => {
          const {code, msg} = res
          if (code === '01') {
            this.$message.success(msg)
            this.init()
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async init() {
      this.loading = true
      await videoRequest.getRightVideoList().then(res => {
        const {code, datalist} = res
        if (code === '01') {
          this.rightVideoList = datalist
        }
      }).catch(() => {
      })

      await videoRequest.getBottomVideoList().then(res => {
        const {code} = res
        if (code === '01') {
          this.bottomVideoList = res.datalist
          this.bottomVideoList.forEach(item=>item.is_delete='0')
          if (this.bottomVideoList && this.bottomVideoList.length > 0) {
            this.videoTitle = this.bottomVideoList[0].name
            this.playVideo(this.bottomVideoList[0].VideoURL)
          }
        }
      }).catch(() => {
      })

      await videoRequest.getLiveSettings().then(res => {
        const {code} = res
        if (code === '01') {
          this.liveInfo = {...res}
          if (this.liveInfo.windowType === '1') {
            this.rightVideoWidth = (this.rightWidth * 0.33 - 10) + 'px'
            this.rightVideoHeight = (this.rightWidth * 0.33 - 10) / 70 * 39 + 'px'
          } else {
            this.rightVideoWidth = (this.rightWidth * 0.5 - 10) + 'px'
            this.rightVideoHeight = (this.rightWidth * 0.5 - 10) / 70 * 39 + 'px'
          }
        }
      }).catch(() => {
      })

      await videoRequest.getName().then(res => {
        const {code} = res
        if (code === '01') {
          this.liveInfo.screenName = res.screenName
        }
      }).catch(() => {
      })
      this.loading = false
    },
    async handleSettingSave() {
      this.loading = true
      await videoRequest.setLiveSettingsEdit({...this.editLiveIngo}).then(res => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })

      await videoRequest.setNameEdit({screenName: this.editLiveIngo.screenName}).then((res) => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
      })
      this.loading = false
      this.isEdit = false
      await this.init()
    },
    handleBottomAdd(videoInfo) {
      const index = this.bottomVideoList.findIndex(item => item === videoInfo)
      let dataList = []
      if (index > -1) {
        dataList = this.bottomVideoList.map(item => {
          return {...item, is_delete: 0}
        })
      } else {
        dataList = [...this.bottomVideoList.map(item => {
          return {...item, is_delete: 0}
        }), {...videoInfo, is_delete: 0}]
      }
      videoRequest.setVideoWebUpload({
        datalist: dataList
      }).then(res => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success(msg)
          this.init()
        } else {
          this.$message.error(msg)
        }
      })
    },
    handleRightAdd(videoInfo) {
      const index = this.rightImgList.findIndex(item => item === videoInfo)
      let dataList = []
      if (index > -1) {
        dataList = this.rightImgList.map(item => {
          return {...item, is_delete: 0}
        })
      } else {
        dataList = [...this.rightImgList.map(item => {
          return {...item, is_delete: 0}
        }), {...videoInfo, is_delete: 0}]
      }
      this.rightImgList = dataList
      videoRequest.setImageUpload({
        datalist: dataList
      }).then(res => {
        const {code, msg} = res
        if (code === '01') {
          this.$message.success(msg)
          this.init()
        } else {
          this.$message.error(msg)
        }
      })
    },
    handleTopSave() {
      this.init()
    },
    choosePath() {
      this.$router.push('/choosePath')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/base";

.d-view.video-list {
  background: #181818;
  padding: $spacing-narrow $spacing-large;

  .header {
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;

    .title {
      color: $color-warning-400;
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1;
      display: flex;
      align-items: center;

      .title-decorate {
        margin-left: $spacing-base;

        ::v-deep.col {
          background: $color-alpha-warning-300-64;
        }
      }
    }

    .action {
      display: flex;

      .btn {
        //background: $color-alpha-white-32;
        //border-radius: 4px;
        cursor: pointer;
        //padding: $spacing-mini-er;

        .iconfont {
          font-size: 1.6rem;
        }

        img {
          width: 1.8rem;
        }

        //&:hover {
        //  background: $color-alpha-white-64;
        //  transition: all $transition-timing-function $transition-duration-12;
        //}

        & + .btn {
          margin-left: $spacing-base;
        }
      }
    }
  }

  .main {
    height: calc(100% - 5.5rem);
    display: flex;

    $nav-width: 34rem;
    $video-height: 12rem;

    .edit-video-list {
      width: 100%;
      height: calc(#{$video-height} - 2rem);
      white-space: nowrap;
      margin-top: 0.5rem;
      display: flex;

      ::v-deep.el-scrollbar {
        width: 100%;
        height: 100%;
      }


      .edit-item {
        display: inline-block;
        width: 16rem;
        height: calc(#{$video-height} - 2rem);
        margin-right: $spacing-base;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        flex-shrink: 0;

        .edit-item-title {
          height: 2rem;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: $color-alpha-black-80;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }

        &:hover {
          .edit-item-action {
            display: flex;
          }
        }

        .edit-item-action {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background: $color-alpha-black-80;
          display: none;
          align-items: center;
          justify-content: center;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .edit-video-upload {
        width: 16rem;
        height: calc(#{$video-height} - 2rem);
        border: 1px dashed $color-alpha-white-80;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin-right: $spacing-base;

        i {
          font-size: 3rem;
          color: $color-alpha-white-80;
        }

        &:hover {
          border: 1px dashed $color-alpha-white-64;

          i {
            font-size: 3rem;
            color: $color-alpha-white-64;
          }
        }
      }
    }

    .content {
      width: calc(100% - #{$nav-width});
      height: 100%;
      position: relative;


      .video-area {
        width: 100%;
        height: calc(100% - #{$video-height} - 3.5rem);
        position: relative;

        .video-content {
          width: 100%;
          height: 100%;
          background: black;
        }


      }

      .video-main-title {
        width: 100%;
        height: 3rem;
        color: $color-alpha-white-64;
        font-size: 1.5rem;
        line-height: 1;
        display: flex;
        align-items: center;
      }

      .video-list {
        width: 100%;
        height: $video-height;
        white-space: nowrap;

        ::v-deep.el-scrollbar {
          width: 100%;
          height: 100%;
        }

        .video-item {
          display: inline-block;
          width: 16rem;
          height: calc(#{$video-height} - 1.2rem);
          margin-right: $spacing-base;
          cursor: pointer;

          img {
            width: 224px;
            height: 126px;
            object-fit: cover;
            border-radius: 4px;
            user-select: none;
            -webkit-user-drag: none;
          }

          .video-title {
            color: $color-alpha-white-80;
            font-size: 1.2rem;
            line-height: 1;
            margin-top: 2px;
          }
        }
      }

      .edit-title {
        height: 1.5rem;

        > span {
          font-size: 1.2rem;
          color: white;
        }

        .desc {
          font-size: 1rem;
          color: $color-alpha-white-64;
          margin-left: $spacing-mini;
        }
      }


    }

    .nav-video-list {
      width: $nav-width;
      height: 100%;
      margin-left: $spacing-base;
      position: relative;

      $search-height: 3rem;
      $video-footer: 3rem;

      .search-box {
        height: 2.5rem;
        background: $color-alpha-white-16;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
        border-radius: 4px;

        ::v-deep.el-input {
          border: none !important;
          background: transparent !important;

          .el-input__inner {
            background: transparent !important;
            border: none;
            color: $color-alpha-white-80;
          }
        }

        ::v-deep.el-select {
          border: none !important;
          background: transparent !important;
          display: flex;
          align-items: center;
          margin-left: 1rem;

          &::before {
            content: '';
            height: 1rem;
            width: 1px;
            display: inline-block;
            background: $color-alpha-white-64;
          }
        }

      }

      .title {
        height: 2.5rem;
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
      }

      .video-list {
        height: calc(100% - #{$search-height} - 5rem);
        display: flex;
        //justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
        padding-top: 1rem;

        ::v-deep.el-scrollbar__wrap {
          overflow-x: hidden;
        }


        .scroll-panel {
          height: calc(100% - #{$search-height} - 5rem);
          display: flex;
          //justify-content: space-around;
          align-items: flex-start;
          flex-wrap: wrap;
        }

        &[model='1'] {
          .video-item {
            width: 33.33333%;
          }
        }


        .video-item {
          width: 50%;
          margin-bottom: 1rem;
          cursor: not-allowed;

          &[video='true'] {
            cursor: pointer;
          }


          .el-image {
            height: calc(100% - 2rem);
            width: 100%;
            object-fit: cover;
            border-radius: 4px;
          }

          .video-title {
            color: $color-alpha-white-80;
            margin-right: 15px;

            .video-desc {
              position: relative;

              &[video='true'] {
                margin-right: 10px;


                &:after {
                  content: '';
                  width: 6px;
                  height: 6px;
                  background: #00a9e2;
                  border-radius: 50%;
                  position: absolute;
                  right: -10px;
                  top: 10px;
                }
              }
            }
          }
        }
      }

      .edit-content {
        ::v-deep.el-form-item__label {
          color: white;
        }

        .desc {
          margin-left: 120px;
          margin-top: -14px;
          margin-bottom: 18px;
          color: $color-alpha-white-64;
          font-size: 1rem;
        }

        ::v-deep.el-radio__label {
          color: white;
        }


        .img-content {
          width: 32rem;

          ::v-deep.el-scrollbar {
            height: 160px;
            overflow: hidden;

            .el-scrollbar__wrap {
              overflow-x: hidden;

              .el-scrollbar__view {
                white-space: nowrap;
                display: inline-block;
              }
            }
          }

          .img-list {
            display: flex;
          }
        }

      }

      .video-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 2rem;
      }

      .action {
        position: absolute;
        bottom: $spacing-large;
        right: 0;
      }

    }
  }
}
</style>


<style>
.prism-fullscreen-btn,
.prism-cc-btn {
  display: none;
}

.full-btn:hover {
  -webkit-animation: hoverAnimationScale 1s 1;
}

</style>
